<template>
  <div id="findDoctor">
    <header>
      <i @click="goBack()"></i>
      <div>预约医生</div>
      <a href="tel: 4006062030">
        <img src="../../image/tele.png" alt="">
      </a>
    </header>
    <div class="docIntroBox" v-show="showdocIntroBox" @click.stop='showdocIntroBox = false'>
      <div class="docIntro" @click.stop='showdocIntroBox = true'>
        <img class="closebtn" src="../../image/closed_doctor_suggests@2x.png" width="28" 
        alt="" @click.stop='showdocIntroBox = false'>
        <h3>{{currentDoctor.name}}</h3>
        <div class="left">
          <div>简介: {{currentDoctor.introduct || '暂无简介哦'}}</div>
        </div>
      </div>
    </div>

    <div class='nav'>
      <span class="cateBtn" @click="goCityList">{{currCity}}</span>
      <span class="cateBtn" @click="toggle()">{{category.value}}</span>
    </div>
    <div class="mc" v-show='showCate' @click="toggle()"></div>
    <!-- 类目列表 -->
    <ul class="cateul" v-show='showCate'>
      <li v-for="(item,index) in categoryList" :key="index">
        <label @change="select">
          <span>{{item.value}}</span>
          <input type="radio" v-model="category" :value="item">
          <span></span>
        </label>
      </li>
    </ul>
    <ul class="list">
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class='mengceng' v-if="list.length<1">
          <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
          <p>该城市未找到医生哦!</p>
        </div>
        <li>
          <span>姓名</span>
          <span>好评率</span>
          <span>下单数</span>
          <!-- <span>职称</span> -->
          <span>擅长专业</span>
          <span>预约</span>
        </li>
        <li v-for='(item,index) in list' :key='index' v-if="list.length>0&&item.ishide_ordernum==1">
          <span @click="showIntroduction(item)">{{item.name}}</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate<='2'">☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='3'">☆☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='4'">☆☆☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='5'">☆☆☆☆☆</span>
          <span>{{item.order_number}}</span>
          <span v-if="item.profess">{{item.profess}}</span>
          <span v-if="item.profess1">{{item.profess1}}</span>
          <span v-if="item.profess2">{{item.profess2}}</span>
          <span v-if="item.profess3">{{item.profess3}}</span>
          <span v-if="item.profess4">{{item.profess4}}</span>
          <span style="position: relative;">
            <input type="checkbox" v-model="docArr" :value="item.id">
            <span></span>
          </span>
        </li>
      </Loadmore>
    </ul>
    <div class='next'>
      <a @click='goNext()'>下一步</a>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        currCity: '', //当前城市
        categoryList: [{
            key: 'favorable_rate',
            value: "好评率",
          },
          {
            key: 'order_number',
            value: "下单数",
          },
          {
            key: 'profess',
            value: "牙齿种植",
          },
          {
            key: 'profess1',
            value: "牙齿矫正",
          },
          {
            key: 'profess2',
            value: "微创拔牙",
          },
          {
            key: 'profess3',
            value: "根管治疗",
          },
          {
            key: 'profess4',
            value: "前牙贴面",
          },
        ],
        category: {
          key: 'favorable_rate',
          value: "好评率",
        }, //默认类目
        showCate: false, //是否显示类目
        list: [],
        currentDoctor: {}, //用户点击的医生对象
        sentPage: {
          page: 1, //分页累加
          sidx: 'favorable_rate',
          sord: 'desc',
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false,
        docArr: [],
        showdocIntroBox: false, //是否显示医生详情弹窗 默认否
        currentDoc: {}, //当前点中的医生详情 如图片 简介
      }
    },
    components: {
      Loadmore
    },
    methods: {
      //返回上一级
      goBack() {
        // this.$router.push({name: "ImPatient"});
        this.$router.push({
          name: "home"
        });
      },
      // 获取医生列表
      getList(city, params) {
          if(city=='全国'){
              city=''
          }
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_doctor_user/1?area=" + city
            , params, r => {
              this.totalNum = r.data.records;
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
      },
      //上拉加载
      loadBottom() {
        this.allLoaded = false;
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.currCity, this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      // 选择城市
      goCityList() {
        this.$router.push({
          name: "cityList"
        });
      },
      // 选择医生后下一步
      goNext() {
        if (this.docArr.length < 1) {
          this.$utils._toast("至少选择一位");
        } else {
          this.$router.push({
            name: "subCustomData",
            query: {
              docArr: this.docArr.join(),
            }
          });
        }
      },
      // 医生简介弹窗 
      showIntroduction(item) {
        this.currentDoctor = item;
        this.showdocIntroBox = true;
      },
      // 类目列表显示隐藏
      toggle() {
        if ($(".cateul").is(':hidden')) {
          this.showCate = true;
          $(".cateul").slideDown("normal");;
        } else {
          this.showCate = false;
          $(".cateul").slideUp("normal");
        }
      },
      // 选中某个类目
      select() {
        this.showCate = false;
        if (this.category.key == 'plant_price' || this.category.key == 'repair_price') {
          this.sentPage.sidx = this.category.key;
          this.sentPage.sord = 'asc';
        } else {
          this.sentPage.sidx = this.category.key;
          this.sentPage.sord = 'desc';
        }
        this.getList(this.currCity, this.sentPage);
      },
      // 获取选择城市
      init() {
        if (this.$route.query.city) {
          this.currCity = this.$route.query.city;
          this.getList(this.currCity, this.sentPage);
        } else {
            this.currCity='全国'
            this.getList(this.currCity, this.sentPage);
        }
      },
    },
    mounted() {

    },
    created() {
      this.init();
    }
  }

</script>
<style lang="scss" scoped>
  #findDoctor ul.list li span input[type='checkbox'] {
    position: absolute;
    height: 35%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
  }

  #findDoctor ul.list li {
    margin: 0px;
  }

  span {
    text-align: center;
  }

  .mengceng {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
